<template>
  <div>
    <div class="crumbs">
      <el-breadcrumb separator="/">
        <el-breadcrumb-item>
          <i class="el-icon-lx-cascades"></i> 考试详情
        </el-breadcrumb-item>
      </el-breadcrumb>
    </div>
    <div class="container">
      <div class="handle-box">
        <!--                <el-select v-model="query.address" placeholder="地址" class="handle-select mr10">-->
        <!--                    <el-option key="1" label="广东省" value="广东省"></el-option>-->
        <!--                    <el-option key="2" label="湖南省" value="湖南省"></el-option>-->
        <!--                </el-select>-->
        <el-input v-model="subjectSearch" placeholder="课程名称" class="handle-input mr10"></el-input>
        <el-button type="primary" icon="el-icon-search" @click="handleSearch">搜索</el-button>
      </div>
      <el-table :data="tableData" border class="table" ref="multipleTable" header-cell-class-name="table-header">
        <el-table-column label="考试科目">
          <template #default="scope">{{ scope.row.examSubject }}</template>
        </el-table-column>
        <el-table-column label="考试时间" align="center">
          <template #default="scope">
            {{ scope.row.examDates }}
          </template>
        </el-table-column>
        <el-table-column label="考试要求">
          <template #default="scope">{{ scope.row.examIntroduce }}</template>
        </el-table-column>
        <el-table-column label="考试地点">
          <template #default="scope">{{ scope.row.examPosition }}</template>
        </el-table-column>
        <el-table-column prop="address" label="考试时长">
          <template #default="scope">{{ scope.row.examTime }}</template>
        </el-table-column>
        <el-table-column prop="date" label="监考教师">
          <template #default="scope">{{ scope.row.examTeacher }}</template>
        </el-table-column>
        <el-table-column prop="date" label="考试状态">
          <template #default="scope">{{ scope.row.examStatus }}</template>
        </el-table-column>
        <el-table-column label="查看">
          <template #default="scope">
            <el-button type="primary" @click="examDetail(scope.row)" style="width: 120px">详情</el-button>
          </template>
        </el-table-column>
      </el-table>
    </div>

    <!-- 编辑弹出框 -->
    <el-dialog title="详情" v-model="detail" width="30%">
      <el-form label-width="70px">
        <el-form-item label="授课教师">
          <el-input v-model="subjectInfo.subjectLeader" disabled></el-input>
        </el-form-item>
        <el-form-item label="开设学院">
          <el-input v-model="subjectInfo.subjectCollege" disabled></el-input>
        </el-form-item>
        <el-form-item label="考试人数">
          <el-input v-model="stuNum" disabled></el-input>
        </el-form-item>
        <el-form-item label="考试简介">
          <el-input v-model="subjectInfo.examIntroduce" disabled></el-input>
        </el-form-item>
<!--        <el-form-item label="考试时间">-->
<!--          <el-input v-model="subjectInfo.examTime" disabled></el-input>-->
<!--        </el-form-item>-->
      </el-form>
      <template #footer>
        <span class="dialog-footer">
<!--          <el-button @click="editVisible = false">取 消</el-button>-->
        </span>
      </template>
    </el-dialog>
    <el-dialog title="考试详情" v-model="detail2" width="50%">
      <el-collapse accordion>
        <el-collapse-item title="课程详情">
          <div>{{subjectInfo.subjectName}}</div>
          <div>{{subjectInfo.subjectCollege}}</div>
        </el-collapse-item>
        <el-collapse-item title="考试详情"></el-collapse-item>
        <el-collapse-item title="考试人员详情"></el-collapse-item>
      </el-collapse>
    </el-dialog>
  </div>
</template>

<script>
import {ref, reactive} from "vue";
import {ElMessage, ElMessageBox} from "element-plus";
import {queryMyExams, queryStudentsByExamId, selectExamInfoByIdAdmin} from "../api/index";

export default {
  name: "basetable",
  data() {
    return {
      subjectName: '',
      tableData: [
        {
          id:0,
          examSubject: 'javac',
          examIntroduce: 'java结课考试',
          examPosition: '教学楼1101',
          examTeacher: '吴秀波',
          examTime: '90分钟',
          examDates: '2022-07-01 9:00',
          examStatus: '未开始'
        },
      ],
      editVisible:false,
      subjectSearch:'',
      detail:false,
      examInfo:{},
      subjectInfo:{
        subjectName:'123213',
        subjectCollege:'12213',
        subjectLeader:'',
        examIntroduce:'',
        examTime:'',
      },
      stuNum:0,
    }
  },
  methods:{
    handleSearch(){
      queryMyExams({subjectName:this.subjectSearch}).then(res => {
        if(res.code === '200'){
          this.tableData = res.data;
          this.$message.success(res.message);
        }else {
          this.$message(res.message);
        }
      })
    },
    saveEdit(){

    },
    queryMyExamInfo(){
      queryMyExams({subjectName:this.subjectSearch}).then(res => {
        if(res.code === '200'){
          this.tableData = res.data;
          this.$message.success(res.message);
        }else {
          this.$message(res.message);
        }
      })
    },
    examDetail(row){
      selectExamInfoByIdAdmin({examId:row.id}).then(res => {
        if(res.code === '200'){
          this.subjectInfo = res.data;
          this.subjectInfo.examIntroduce = row.examIntroduce;
        }
      })
      queryStudentsByExamId({examId: row.id}).then(res => {
        if (res.code === '200') {
          this.stuNum = res.data.length;
        }
      })
      this.detail = true;
    }
  },
  mounted() {
    this.queryMyExamInfo();
  }
};
</script>

<style scoped>
.handle-box {
  margin-bottom: 20px;
}

.handle-select {
  width: 120px;
}

.handle-input {
  width: 300px;
  display: inline-block;
}

.table {
  width: 100%;
  font-size: 14px;
}

.red {
  color: #ff0000;
}

.mr10 {
  margin-right: 10px;
}

.table-td-thumb {
  display: block;
  margin: auto;
  width: 40px;
  height: 40px;
}
</style>
